<!--
 * @Author: hq
 * @Date: 2022-05-28 19:29:52
 * @LastEditors: hq
 * @LastEditTime: 2022-08-05 09:51:47
 * @Description: 添加分类弹窗
 * @version: 1.0
-->
<template>
  <div class="change">
    <el-row>
      <el-col :span="18">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="房型名" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入房型名"
            ></el-input>
          </el-form-item>
          <el-form-item label="床型" prop="bed_model">
            <el-input
              v-model="ruleForm.bed_model"
              placeholder="请输入床型"
            ></el-input>
          </el-form-item>
          <el-form-item label="房间面积" prop="area">
            <el-input
              oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              v-model="ruleForm.area"
              placeholder="请输入房间面积"
            >
              <template slot="append">㎡</template></el-input
            >
          </el-form-item>
          <el-form-item label="缩略图" :required="true">
            <el-upload
              v-loading="loading1"
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="upLoadServe"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品轮播图" :required="true">
            <el-upload
              v-loading="loading2"
              action=""
              list-type="picture-card"
              :http-request="upLoadServeBanner"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :limit="3"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog
              class="editDialog"
              :visible.sync="dialogVisible"
              :append-to-body="true"
              width="500px"
            >
              <img width="100%" :src="bannerImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="原价" prop="oprice">
            <el-input
              oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              v-model="ruleForm.oprice"
              placeholder="请输入原价"
            ></el-input>
          </el-form-item>
          <el-form-item label="现价" prop="price">
            <el-input
              oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              v-model="ruleForm.price"
              placeholder="请输入现价"
            ></el-input>
          </el-form-item>
          <el-form-item label="免费退房时间" :required="true">
            <el-time-select
              v-model="ruleForm.refund_end"
              :picker-options="{
                start: '00:00',
                step: '00:15',
                end: '18:00',
              }"
              placeholder="选择时间"
            >
            </el-time-select>
            <!-- <el-date-picker
              v-model="ruleForm.refund_end"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker> -->
          </el-form-item>
          <el-form-item label="退房超时手续费" prop="refund_fee">
            <el-input
              oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              v-model="ruleForm.refund_fee"
              placeholder="请输入退房超时手续费"
            >
              <template slot="append">%</template></el-input
            >
          </el-form-item>
          <el-form-item label="入住人数" prop="bed_nums">
            <el-input
              oninput="value=value.replace(/[^0-9]/g,'')"
              maxlength="2"
              v-model="ruleForm.bed_nums"
              placeholder="请输入入住人数"
            ></el-input>
          </el-form-item>
          <el-form-item label="早餐">
            <el-radio-group v-model="ruleForm.brk">
              <el-radio :label="1">有</el-radio>
              <el-radio :label="0">无</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态" prop="bed_nums">
            <el-switch
              v-model="ruleForm.status"
              active-text="禁用"
              inactive-text="启用"
              :active-value="1"
              :inactive-value="0"
              inactive-color=""
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="房间数量" prop="price">
            <div
              class="room_list"
              v-for="(item, index) in ruleForm.stock"
              :key="index"
            >
              <div class="txt">{{ item.text }}</div>
              <el-input
                oninput="value=value.replace(/[^0-9]/g,'')"
                v-model="item.number"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="配套设施" :require="true">
            <el-button @click="handleAddFac">添加</el-button>
            <div class="fac">
              <div
                class="fac_list"
                v-for="(item, index) in ruleForm.facs"
                :key="index"
              >
                <img class="fac_img" :src="item.icon" alt="" />
                <div class="name">{{ item.name }}</div>
                <el-input placeholder="备注值" v-model="item.desc"></el-input>
                <i
                  class="el-icon-delete hand_cs"
                  @click="handleDelFac(index)"
                ></i>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="政策与服务">
            <div class="purchase">
              <div
                class="purchase_con"
                v-for="(item, index) in ruleForm.service"
                :key="index"
              >
                <div class="l">
                  <div class="flex">
                    <div>标题：</div>
                    <el-input v-model="item.title"></el-input>
                  </div>
                  <div class="flex">
                    <div>内容：</div>
                    <el-input v-model="item.list" type="textarea"></el-input>
                  </div>
                </div>
                <div v-if="index === 0" @click="handleAddrefund">
                  <i class="el-icon-plus hand_cs"></i>
                </div>
                <div>
                  <i
                    v-if="index != 0"
                    @click="handleDelrefund(index)"
                    class="el-icon-delete hand_cs"
                  ></i>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit('ruleForm')"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 编辑 新增 -->
    <el-dialog
      class="editDialog"
      title="配套设施"
      :visible.sync="facsDialog"
      :close-on-click-modal="false"
      width="70%"
      append-to-body
    >
      <el-table
        border
        :data="tableData"
        :header-cell-style="{
          'text-align': 'center',
        }"
        :cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
        highlight-current-row
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" min-width="10%"> </el-table-column>
        <el-table-column prop="id" label="id" min-width="10%">
        </el-table-column>
        <el-table-column prop="name" label="设施名" min-width="10%">
        </el-table-column>
        <el-table-column label="icon" min-width="15%">
          <template slot-scope="scope">
            <div class="slt">
              <el-popover placement="right" width="200" trigger="hover">
                <img class="tbImg1" :src="scope.row.icon" alt="" />
                <img
                  class="tbImg"
                  slot="reference"
                  :src="scope.row.icon"
                  alt=""
                />
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="备注" min-width="10%">
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="handleAdd">确认添加</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { roomDetail, defaultFacs, editRoom, addRoom } from "@/api/shopSystem";
import upImg from "@/utils/upimg";
export default {
  props: ["hotelId", "roomData"],
  data() {
    return {
      ruleForm: {
        name: "",
        brk: 0,
        tel: "",
        address: "",
        startTime: "",
        endTime: "",
        status: 1,
        stock: [
          { text: "星期天", number: 5 },
          { text: "星期一", number: 5 },
          { text: "星期二", number: 5 },
          { text: "星期三", number: 5 },
          { text: "星期四", number: 5 },
          { text: "星期五", number: 5 },
          { text: "星期六", number: 5 },
        ],
        service: [{ list: "", title: "" }],
        facs: [],
      },
      imageUrl: "",
      bannerImageUrl: "", //baner
      fileList: [],
      fileListId: [],
      fileListArr: [],
      mapDialog: false,
      optionProps: {
        value: "area_code",
        label: "name",
        children: "child",
      },
      modelKey: "",
      position: {
        lon: "",
        lat: "",
      }, //位置信息
      addressCode: "", //省市区code
      rules: {
        name: [{ required: true, message: "请输入房型名", trigger: "blur" }],
        bed_model: [{ required: true, message: "请输入床型", trigger: "blur" }],
        area: [{ required: true, message: "请输入房间面积", trigger: "blur" }],
        oprice: [{ required: true, message: "请输入原价", trigger: "blur" }],
        price: [{ required: true, message: "请输入现价", trigger: "blur" }],
        refund_fee: [
          { required: true, message: "请输入退房超时手续费", trigger: "blur" },
        ],
        bed_nums: [
          { required: true, message: "请输入入住人数", trigger: "blur" },
        ],
      },
      dialogVisible: false, //banner图片dialog
      loading1: false,
      loading2: false,
      facsDialog: false, //配套设施选择
      tableData: [],
      multipleSelection: [],
    };
  },
  methods: {
    //详情
    async roomDetail() {
      const { data, err } = await roomDetail({
        id: this.roomData.id,
      });
      if (err === 0) {
        this.ruleForm = data;
        this.imageUrl = data.thumb;
        this.fileList = data.images;
      }
    },
    async editRoom() {
      const { msg, err } = await editRoom({
        id: this.roomData.id,
        name: this.ruleForm.name,
        bed_model: this.ruleForm.bed_model,
        area: this.ruleForm.area,
        thumb: this.imageUrl,
        images: this.fileListArr.join(","), //轮播图
        oprice: this.ruleForm.oprice,
        price: this.ruleForm.price,
        refund_end: this.ruleForm.refund_end,
        refund_fee: this.ruleForm.refund_fee,
        stock: this.ruleForm.stock,
        bed_nums: this.ruleForm.bed_nums,
        status: this.ruleForm.status,
        brk: this.ruleForm.brk,
        facs: this.ruleForm.facs,
        service: this.ruleForm.service,
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "操作成功！",
          type: "success",
        });
        this.$emit("handleClose");
      } else {
        this.$message({
          showClose: true,
          message: msg,
          type: "erroe",
        });
      }
    },
    async addRoom() {
      const { msg, err } = await addRoom({
        hotel: this.hotelId,
        name: this.ruleForm.name,
        bed_model: this.ruleForm.bed_model,
        area: this.ruleForm.area,
        thumb: this.imageUrl,
        images: this.fileListArr.join(","), //轮播图
        oprice: this.ruleForm.oprice,
        price: this.ruleForm.price,
        refund_end: this.ruleForm.refund_end,
        refund_fee: this.ruleForm.refund_fee,
        stock: this.ruleForm.stock,
        bed_nums: this.ruleForm.bed_nums,
        status: this.ruleForm.status,
        brk: this.ruleForm.brk,
        facs: this.ruleForm.facs,
        service: this.ruleForm.service,
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "操作成功！",
          type: "success",
        });
        this.$emit("handleClose");
      } else {
        this.$message({
          showClose: true,
          message: msg,
          type: "erroe",
        });
      }
    },
    //配套设施接口
    async defaultFacs() {
      const { data, err } = await defaultFacs({});
      if (err === 0) {
        this.tableData = data.data;
        let newArr = [];
        this.tableData.forEach((item) => {
          this.ruleForm.facs.forEach((v) => {
            if (item.id === v.id) {
              newArr.push(item);
            }
          });
        });
        this.$nextTick(() => {
          newArr.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        });
        this.multipleSelection = newArr;
      }
    },
    //删除商品图
    handleRemove(file, fileList) {
      //原来的图片
      this.fileList = fileList;
      //添加的图片
      this.fileListId.forEach((item, index) => {
        if (file.name === item.name) {
          this.fileListId.splice(index, 1);
        }
      });
      this.fileListArr = this.fileListId.map((item) => {
        return item.id;
      });
    },
    //上传轮播
    upLoadServeBanner(file) {
      this.loading2 = true;
      upImg.upimg(
        (data) => {
          //state轮播图
          this.fileListId.push({ id: data.data.url, name: file.file.name });
          this.fileListArr = this.fileListId.map((item) => {
            return item.id;
          });
          this.loading2 = false;
        },
        1,
        file
      );
    },
    //上传logo
    upLoadServe(file) {
      this.loading1 = true;
      upImg.upimg(
        (data) => {
          console.log(data);
          //判断是logo
          this.imageUrl = data.data.pre_img;
          this.loading1 = false;
        },
        1,
        file
      );
    },
    //商品图
    handlePictureCardPreview(file) {
      this.bannerImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除配套设施
    handleDelFac(index) {
      this.ruleForm.facs.splice(index, 1);
    },
    //添加配套设施
    handleAddFac() {
      this.facsDialog = true;
      this.defaultFacs();
    },
    //表格选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //确认添加
    handleAdd() {
      this.facsDialog = false;
      this.ruleForm.facs = this.multipleSelection;
    },
    //新增政策与服务
    handleAddrefund() {
      this.ruleForm.service.push({ title: "", list: "" });
    },
    //删除政策与服务
    handleDelrefund(index) {
      this.ruleForm.service.splice(index, 1);
    },
    //提交
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.fileList) {
            //如果有旧图片
            this.fileList.forEach((item) => {
              this.fileListArr.push(item.url);
            });
          }
          if (this.roomData.id) {
            //编辑
            this.editRoom();
          } else {
            //新增
            this.addRoom();
          }
        }
      });
    },
  },
  created() {
    if (this.roomData.id) {
      //编辑
      this.roomDetail();
    }
  },
};
</script>

<style lang="scss" scoped>
.fac {
  margin-top: 20px;
  .fac_list {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .fac_img {
      width: 25px;
      height: 25px;
    }
    .name {
      text-align: center;
      width: 80px;
      flex-shrink: 0;
      font-size: 13px;
    }
    i {
      margin-left: 10px;
      font-size: 18px;
    }
  }
}
.room_list {
  display: flex;
  .txt {
    width: 80px;
    text-align: center;
    flex-shrink: 0;
    font-size: 13px;
  }
  .el-input {
    width: 200px;
  }
}
.purchase {
  padding-top: 50px;
  box-sizing: border-box;
  .purchase_con {
    display: flex;
    align-items: center;
    font-size: 13px;
    .l {
      width: 95%;
      .flex {
        // width: 400px;
        display: flex;
        align-items: center;
        .el-input,
        .el-textarea {
          width: 85%;
        }
        div {
          flex-shrink: 0;
          margin-bottom: 20px;
        }
      }
    }
    i {
      font-size: 30px;
      flex-shrink: 0;
    }
  }
}

/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
/deep/.el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.mapDialog {
  /deep/.el-dialog {
    height: 82%;
    margin-top: 10vh !important;
    .el-dialog__body {
      height: 80%;
      overflow: auto;
    }
  }
}
/deep/.el-date-editor.el-input {
  //   width: 140px;
  .el-input__inner {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }
}
.editDialog {
  /deep/.el-dialog {
    height: 82%;
    margin-top: 10vh !important;
    .el-dialog__body {
      height: 80%;
      overflow: auto;
    }
  }
}
.avatar-uploader {
  width: 82px;
  height: 82px;
}
.slt .tbImg {
  width: 22px;
  height: 22px;
}
</style>
